<template>
    <recycle-scroller>
        <div class="header">
            <a-row>
                <a-col :span="2"></a-col>
                <a-col :span="4">
                    <div>
                        <a-image
                            :width="150"
                            class="animate__animated animate__fadeInLeft"
                            :src="myData.iconUrl"
                            :preview="false"
                            style="margin-top: 18px;margin-left: 55px"
                        />
                    </div>
                </a-col><a-col :span="10"></a-col>
                <a-col :span="8">
                    <a-menu
                        v-model:selectedKeys="selectedKey"
                        theme="white"
                        mode="horizontal"
                        :style="{ lineHeight: '65px'}"
                    >
                        <a-menu-item key="1">
                            人才学院&nbsp;</a-menu-item>
                        <a-menu-item key="2">人才认证&nbsp;</a-menu-item>
                        <a-menu-item  key="3">人才服务&nbsp;</a-menu-item>
                    </a-menu>
                </a-col>
            </a-row>
        </div>

        <div class="homeBody">
            <a-row>
                <a-col :span="3"></a-col>
                <a-col :span="7">
                    <div style="margin-top: 230px">
                        <h1 class="animate__animated animate__slideInUp" style="color: #5f9bf1;font-size: 47px;line-height: 1.5;margin-bottom: 8px">人才呀</h1>
                        <h2 class="animate__animated animate__slideInUp" style="font-size: 24px;margin-bottom: 24px;color: black">终身学习平台</h2>
                        <h3 class="animate__animated animate__slideInUp" style="font-size: 18px;color: #666;margin-bottom: 48px">通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知</h3>
                        <a-button class="animate__animated animate__slideInUp" style="width: 130px" type="primary" @click="login" shape="round" size="large">登录</a-button>
                    </div>
                </a-col>
                <a-col :span="1"></a-col>
                <a-col :span="13">
                    <div style="margin-top: 130px;margin-left: 10px">
                        <a-image
                            :src="myData.homeImg"
                            :preview="false"
                        />
                    </div>
                </a-col>
            </a-row>
        </div>

        <div class="product" style="height: 550px">
            <h1 style="font-size: 32px; text-align: center; margin: 20px auto 48px">产品与服务</h1>
            <a-row>
                <a-col :span="4"></a-col>

                <a-col :span="4">
                    <div v-show="productOne" class="productOne" style="margin-top: 30px" align="center">
                        <a-image
                            :width="100"
                            :src="myData.productOne"
                            :preview="false"
                        />
                        <h1 class="productTitle">{{myData.oneTitle}}</h1>
                    </div>
                </a-col><a-col :span="2"></a-col>

                <a-col :span="4">
                    <div v-show="productTwo" class="productTwo" style="margin-top: 30px" align="center">
                        <a-image
                            :width="100"
                            :src="myData.productTwo"
                            :preview="false"
                        />
                        <h1 class="productTitle">{{myData.twoTitle}}</h1>
                    </div>
                </a-col><a-col :span="2"></a-col>

                <a-col :span="4">
                    <div v-show="productThree" class="productThree" style="margin-top: 30px" align="center">
                        <a-image
                            :width="100"
                            :src="myData.productThree"
                            :preview="false"
                        />
                        <h1 class="productTitle">{{myData.threeTitle}}</h1>
                    </div>
                </a-col><a-col :span="4"></a-col>
            </a-row>
            <div style="height: 6em;"></div>
        </div>

        <div class="hotJob" style="height: 550px">
            <h1 style="font-size: 32px; text-align: center; margin: 0 auto 15px">热门岗位</h1>
            <h3 style="text-align: center;">以岗位为导向，构建全体系学习路径，从学习到认证一站式平台</h3>
            <a-row>
                <a-col :span="4"></a-col>

                <a-col :span="4">
                    <div v-show="jobOne" class="jobOne jobItem" align="center">
                        <a-image
                            :src="myData.jobOne"
                            :preview="false"
                        />
                        <h1 class="jobTitle">{{myData.jobOneTitle}}</h1><br>
                    </div>
                </a-col>

                <a-col :span="4">
                    <div v-show="jobTwo" class="jobTwo jobItem" align="center">
                        <a-image
                            :src="myData.jobTwo"
                            :preview="false"
                        />
                        <h1 class="jobTitle">{{myData.jobTwoTitle}}</h1><br>
                    </div>
                </a-col>

                <a-col :span="4">
                    <div v-show="jobThree" class="jobThree jobItem" align="center">
                        <a-image
                            :src="myData.jobThree"
                            :preview="false"
                        />
                        <h1 class="jobTitle">{{myData.jobThreeTitle}}</h1><br>
                    </div>
                </a-col>


                <a-col :span="4">
                    <div v-show="jobFour" class="jobFour jobItem" align="center">
                        <a-image
                            :src="myData.jobFour"
                            :preview="false"
                        />
                        <h1 class="jobTitle">{{myData.jobFourTitle}}</h1><br>
                    </div>
                </a-col>

                <a-col :span="4"></a-col>
            </a-row>
            <div style="height: 5em;"></div>
        </div>

        <div class="onlineCourses" style="height: 550px">
            <h1 style="font-size: 32px; text-align: center; margin: 0 auto 15px">精心打造在线课程</h1>
            <h3 style="text-align: center;line-height: 50px">云计算、大数据、人工智能、物联网等热门技术全栈式在线学习</h3>
            <br>
            <a-row>
                <a-col :span="2"></a-col>
                <a-col :span="5">
                    <a-card v-show="courseOne" class="courseOne listCard" hoverable >
                        <h3 class="courseTitle">{{myData.courseOneTitle}}</h3>
                        <p style="color: rgba(49, 70, 89, 0.75);">{{myData.courseOne}}</p>
                    </a-card>
                </a-col>
                <a-col :span="5">
                    <a-card v-show="courseTwo" class="courseTwo listCard" hoverable>
                        <h3 class="courseTitle">{{myData.courseTwoTitle}}</h3>
                        <p style="color: rgba(49, 70, 89, 0.75);">{{myData.courseTwo}}</p>
                    </a-card>
                </a-col>
                <a-col :span="5">
                    <a-card v-show="courseThree" class="courseThree listCard" hoverable >
                        <h3 class="courseTitle">{{myData.courseThreeTitle}}</h3>
                        <p style="color: rgba(49, 70, 89, 0.75);">{{myData.courseThree}}</p>
                    </a-card>
                </a-col>
                <a-col :span="5">
                    <a-card v-show="courseFour" class="courseFour listCard" hoverable >
                        <h3 class="courseTitle">{{myData.courseOneTitle}}</h3>
                        <p style="color: rgba(49, 70, 89, 0.75);">{{myData.courseFour}}</p>
                    </a-card>
                </a-col>
                <a-col :span="2"></a-col>
            </a-row>
            <div style="height: 5em;"></div>
        </div>

        <div class="authentication" style="height: 800px;">
            <h1 style="font-size: 32px; text-align: center; margin: 0 auto 15px">提供专业能力认证</h1>
            <h3 style="text-align: center;">精心打造权威岗位认证体系，扩展职场发展的机遇，成为您技术能力的证明</h3>
            <div class="authTabs" v-show="authTabs">
                <a-tabs v-model:activeKey="activeKey" centered animated>
                    <a-tab-pane key="1">
                        <template #tab>
                        <span>
                          <apple-outlined />
                          认证 1
                        </span>
                        </template>
                        <div>
                            <a-row>
                                <a-col :span="3"></a-col>
                                <a-col :span="10">
                                    <div style="margin-top: 90px;margin-left: 20px">
                                        <h3>{{autoOneInfo.oneTitle}}</h3>
                                        <p style="margin-bottom: 25px">{{autoOneInfo.oneContent}}</p>
                                        <h3>{{autoOneInfo.twoTitle}}</h3>
                                        <p style="margin-bottom: 25px">{{autoOneInfo.twoContent}}</p>
                                        <h3>{{autoOneInfo.threeTitle}}</h3>
                                        <p>{{autoOneInfo.threeContent}}</p>
                                    </div>
                                </a-col>
                                <a-col :span="2"></a-col>

                                <a-col :span="6">
                                    <div style="margin-top: 65px;">
                                        <a-image
                                            :src="autoOneInfo.autoUrl"
                                            :preview="false"
                                        />
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-tab-pane>

                    <a-tab-pane key="2">
                        <template #tab>
                        <span>
                          <apple-outlined />
                          认证 2
                        </span>
                        </template>
                        <div>
                            <a-row>
                                <a-col :span="3"></a-col>
                                <a-col :span="10">
                                    <div style="margin-top: 90px;margin-left: 20px">
                                        <h3>{{autoTwoInfo.oneTitle}}</h3>
                                        <p style="margin-bottom: 25px">{{autoTwoInfo.oneContent}}</p>
                                        <h3>{{autoTwoInfo.twoTitle}}</h3>
                                        <p style="margin-bottom: 25px">{{autoTwoInfo.twoContent}}</p>
                                        <h3>{{autoTwoInfo.threeTitle}}</h3>
                                        <p>{{autoTwoInfo.threeContent}}</p>
                                    </div>
                                </a-col>
                                <a-col :span="2"></a-col>
                                <a-col :span="6">
                                    <div style="margin-top: 65px;">
                                        <a-image
                                            :src="autoTwoInfo.autoUrl"
                                            :preview="false"
                                        />
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-tab-pane>

                    <a-tab-pane key="3" tab="认证 3">
                        <template #tab>
                        <span>
                          <apple-outlined />
                          认证 3
                        </span>
                        </template>
                        <div>
                            <a-row>
                                <a-col :span="3"></a-col>
                                <a-col :span="10">
                                    <div style="margin-top: 90px;margin-left: 20px">
                                        <h3>{{autoThreeInfo.oneTitle}}</h3>
                                        <p style="margin-bottom: 25px">{{autoThreeInfo.oneContent}}</p>
                                        <h3>{{autoThreeInfo.twoTitle}}</h3>
                                        <p style="margin-bottom: 25px">{{autoThreeInfo.twoContent}}</p>
                                        <h3>{{autoThreeInfo.threeTitle}}</h3>
                                        <p>{{autoThreeInfo.threeContent}}</p>
                                    </div>
                                </a-col>
                                <a-col :span="2"></a-col>
                                <a-col :span="6">
                                    <div style="margin-top: 65px;">
                                        <a-image
                                            :src="autoThreeInfo.autoUrl"
                                            :preview="false"
                                        />
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

        <div class="footer" style="height: 380px">
            <a-row>
                <a-col :span="3"></a-col>
                <a-col :span="4">
                    <div v-show="footerOne" class="footerOne" style="margin-left: 10px">
                        <a-image
                            :width="150"
                            :src="myData.footerIcon"
                            :preview="false"
                            style="margin-top: 60px;"
                        />
                        <p style="font-size: 12px;color: #ccc">Animation specification and components of Ant Design.</p>
                    </div>
                </a-col>

                <a-col :span="2"></a-col>
                <a-col :span="2">
                    <div v-show="footerTwo" class="footerTwo">
                        <h2 style="color: #ccc;line-height: 50px;margin-top: 60px">产品</h2>
                        <a class="footerOption" href="javascript:void(0)">产品更新记录</a><br>
                        <a class="footerOption" href="javascript:void(0)">API文档</a><br>
                        <a class="footerOption" href="javascript:void(0)">快速入门</a><br>
                        <a class="footerOption" href="javascript:void(0)">参考指南</a>
                    </div>
                </a-col><a-col :span="2"></a-col>
                <a-col :span="2">
                    <div v-show="footerThree" class="footerThree">
                        <h2 style="color: #ccc;line-height: 50px;margin-top: 60px">关于</h2>
                        <a class="footerOption" href="javascript:void(0)">FAQ</a><br>
                        <a class="footerOption" href="javascript:void(0)">联系我们</a><br>
                    </div>
                </a-col><a-col :span="2"></a-col>
                <a-col :span="2">
                    <div v-show="footerFour" class="footerFour">
                        <h2 style="color: #ccc;line-height: 50px;margin-top: 60px">资源</h2>
                        <a class="footerOption" href="javascript:void(0)">Ant Design</a><br>
                        <a class="footerOption" href="javascript:void(0)">Ant Motion</a><br>
                    </div>
                </a-col>
            </a-row>

            <div class="lastFooter">
                <p>©2018 by<a href="javascript:void(0)" style="color: blue">Ant Motion</a>All Rights Reserved</p>
            </div><br>

        </div>
    </recycle-scroller>


</template>

<script>
import {onBeforeMount, reactive, toRefs} from "vue";
import axios from "axios";
import {message} from "ant-design-vue";
import animate from 'animate.css'

export default {
    name: "HomePage",
    setup(){
        const state = reactive({
            myData: {},                //存储接收到的数据
            selectedKey: ['0'],        //顶部的导航
            activeKey: '1',            //认证的选择框
            autoOneInfo: {},           //认证1的信息
            autoTwoInfo: {},           //认证2的信息
            autoThreeInfo: {},         //认证3的信息
            productOne: false,         //控制产品服务第一个框的动画效果
            productTwo: false,         //控制产品服务第二个框的动画效果
            productThree: false,       //控制产品服务第三个框的动画效果
            productOnce: true,          //控制动画效果不会一直触动，相当于节流
            jobOnce: true,
            jobOne: false,
            jobTwo: false,
            jobThree: false,
            jobFour: false,
            courseOne: false,
            courseTwo:false,
            courseThree:false,
            courseFour: false,
            courseOnce: true,
            authTabs: false,
            authTabsOnce: true,
            footerOnce: true,
            footerOne: false,
            footerTwo: false,
            footerThree: false,
            footerFour: false
        });

        const login = () =>{
            message.success('登录成功');
        }

        const animateCSS = (element, animation, time ,prefix = 'animate__') =>
            new Promise((resolve, reject) => {
                const animationName = `${prefix}${animation}`;
                const node = document.querySelector(element);
                node.style.setProperty('--animate-duration', time);
                node.classList.add(`${prefix}animated`, animationName);
                function handleAnimationEnd(event) {
                    event.stopPropagation();
                    node.classList.remove(`${prefix}animated`, animationName);
                    resolve('Animation ended');
                }
                node.addEventListener('animationend', handleAnimationEnd, {once: true});
            });
        window.addEventListener("scroll", ()=> {
            let currentScroll = 0
            currentScroll = window.pageYOffset
            // 这个高度你看着调
            if(currentScroll<345){
                state.productOne=false
                state.productTwo=false
                state.productThree=false
                state.productOnce =true
            }
            if (currentScroll>345){       /* 产品与服务 */
                if(state.productOnce){
                    // 第一个参数用于选取想要添加特效的dom,第二个参数是特效类名,第三个为特效持续时间
                    animateCSS('.productOne','slideInUp','0.3s')
                    state.productOne=true
                    animateCSS('.productTwo','slideInUp','0.5s')
                    state.productTwo=true
                    animateCSS('.productThree','slideInUp','0.7s')
                    state.productThree=true
                    state.productOnce =false
                }
            }
            if (currentScroll<860){
                state.jobOnce = true
                state.jobOne = false
                state.jobTwo = false
                state.jobThree = false
                state.jobFour = false
            }
            if(currentScroll>860){
                if(state.jobOnce){
                    // 第一个参数用于选取想要添加特效的dom,第二个参数是特效类名,第三个为特效持续时间
                    animateCSS('.jobOne','slideInUp','0.3s')
                    state.jobOne =true
                    animateCSS('.jobTwo','slideInUp','0.5s')
                    state.jobTwo =true
                    animateCSS('.jobThree','slideInUp','0.7s')
                    state.jobThree =true
                    animateCSS('.jobFour','slideInUp','0.9s')
                    state.jobFour =true
                    state.jobOnce =false
                }
            }
            if(currentScroll<1430){
                state.courseOnce=true
                state.courseOne= false
                state.courseTwo=false
                state.courseThree=false
                state.courseFour=false
            }
            if(currentScroll>1430){
                if(state.courseOnce){
                    // 第一个参数用于选取想要添加特效的dom,第二个参数是特效类名,第三个为特效持续时间
                    animateCSS('.courseOne','slideInUp','0.3s')
                    state.courseOne =true
                    animateCSS('.courseTwo','slideInUp','0.5s')
                    state.courseTwo =true
                    animateCSS('.courseThree','slideInUp','0.7s')
                    state.courseThree =true
                    animateCSS('.courseFour','slideInUp','0.9s')
                    state.courseFour =true
                    state.courseOnce =false
                }
            }
            if (currentScroll<2200){
                state.authTabsOnce = true
                state.authTabs =false
            }
            if(currentScroll>2200){
                if(state.authTabsOnce){
                    animateCSS('.authTabs','slideInUp','1s')
                    state.authTabs = true
                    state.authTabsOnce =false
                }
            }
            if (currentScroll<2600){
                state.footerOnce =true
                state.footerTwo = false
                state.footerOne =false
                state.footerThree = false
                state.footerFour =false
            }
            if (currentScroll>2600){
                if (state.footerOnce){
                    animateCSS('.footerOne','slideInUp','0.3s')
                    state.footerOne = true
                    animateCSS('.footerTwo','slideInUp','0.5s')
                    state.footerTwo = true
                    animateCSS('.footerThree','slideInUp','0.7s')
                    state.footerThree = true
                    animateCSS('.footerFour','slideInUp','0.9s')
                    state.footerFour = true
                    state.footerOnce = false
                }
            }
            //console.log(currentScroll)
        })


        const getHomePageData = function (){
            axios.get('/homePage.json').then(res =>{
                console.log("getCourseInfoData" + JSON.stringify(res))
                state.myData = res.data.data
                state.autoOneInfo = state.myData.autoOneInfo
                state.autoTwoInfo = state.myData.autoTwoInfo
                state.autoThreeInfo = state.myData.autoThreeInfo
                console.log("myData" + JSON.stringify(state.myData))
            }).catch(error =>{
                console.log("错误" + error)
            })
            // const appData = require('../../public/courseInfo.json')
            // res = appData.data
        }

        onBeforeMount(()=>{
            getHomePageData()
        });

        return{
            ...toRefs(state),
            login,
        }
    }
}
</script>

<style scoped>
.ant-menu-horizontal{       /* 导航下面的虚线*/
    border: 0;
}
.header{                      /* 头部导航 */
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
}

.homeBody{                    /* 人才呀模块 */
    background: linear-gradient(to top, rgba(253, 253, 253, 0.3) 0%, rgba(193, 218, 255, 0.3) 100%);
}

.product{                     /* 产品与服务 */
    padding: 64px 24px;
}

.productTitle{                 /* 产品与服务图片下面的文字 */
    font-size: 25px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.85);
}
.hotJob{                        /* 热门岗位 */
    padding: 64px 24px;
    background-color: rgb(247, 249, 252);
}

.jobTitle{                      /* 热门岗位图片下面的文字 */
    line-height: 32px;
    margin: 10px auto;
    font-size: 18px;
    font-weight: 500;
}

.listCard:hover{                  /* 在线课程下面的卡片 */
    position: relative;
    top: -3px;
    box-shadow: 0 5px 10px 0 #999;
    transition:all 500ms
}
.listCard{
    margin: 15px;
    box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
    background: url('https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*fMOFSpRXMxsAAAAAAAAAAABkARQnAQ');
    background-repeat: no-repeat;
    background-position: 100% 100%;
}
.jobItem{                       /* 热门岗位下面的卡片 */
    margin-top: 50px;padding: 15px
}

.jobItem:hover{
    box-shadow: 0 2px 16px rgb(0 0 0 / 8%)
}

.onlineCourses{                  /* 在线课程 */
    padding: 64px 24px;
    background-color: rgb(251, 251, 251);
}

.courseTitle{                   /* 在线课程下面的文字 */
    line-height: 14px;color: #314659;
    margin-bottom: 16px;font-weight: 500;
}

.authentication{                  /* 认证模块 */
    padding: 128px 24px;
}

.authTabs{                /* 认证的tabs */
    margin-top: 50px;
}

.footer{                         /* 根模块 */
    background: #001529;
    color: #999;
}
.footerOption{                   /* 根模块文字的颜色 */
    line-height: 35px;
    color: #ccc;
}
.footerOption:hover{
    color: blue;
}
.lastFooter{                           /* 最地下 */
    margin-top: 55px;
    text-align: center;
}

</style>
